<template>
  <div class="wrapper">
    <!-- 头部区域 -->
    <div class="title-wrapper">
      <div class="title">年度游客量对比</div>
      <img class="title-icon" src="../images/dataScreen-title.png" />
    </div>
    <div class="content-wrapper">
      <div class="echarts" ref="yearRef"></div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
import type { Right } from '@element-plus/icons-vue';
let yearRef = ref()
onMounted(() => {
  yearEcharts()
})
const yearEcharts = () => {
  const chart = echarts.init(yearRef.value)
  const option = {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    //标题组件
    title: {
      text: '(人数)',
      top: '7%',
      left: '2%',
      textStyle: {
        fontSize: 12,
        color: '#ffffff',
      }
    },
    legend: {
      type: 'plain',
      top: '0',
      right: '20',
      itemWidth: 20,  // 设置图例标记的宽度
      itemHeight: 10, // 设置图例标记的高度
       icon: "rect ",// 这里使用内置的矩形形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
      textStyle: {
            color: '#fff'  // 图例文字颜色
        },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '2%',
      top: '19%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        //两侧不留白
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        //分割线不要
        splitLine: {
          show: false
        },
        // 轴线的设置
        axisLine: {
          show: true
        },
        //刻度
        axisTick: {
          show: true,
        },
        //设置y轴线上的颜色
        axisLabel: {
          color: '#ffffff'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        //两侧不留白
        boundaryGap: false,
        //分割线不要
        splitLine: {
          show: false
        },
        // 轴线的设置
        axisLine: {
          show: true
        },
        //刻度
        axisTick: {
          show: true,
        },
        //设置y轴线上的颜色
        axisLabel: {
          color: '#ffffff'
        }
      }
    ],
    series: [
      {
        name: 'Line 1',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [140, 232, 101, 264, 90, 340, 250]
      },
      {
        name: 'Line 2',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(0, 221, 255)'
            },
            {
              offset: 1,
              color: 'rgb(77, 119, 255)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 282, 111, 234, 220, 340, 310]
      },
      {
        name: 'Line 3',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(55, 162, 255)'
            },
            {
              offset: 1,
              color: 'rgb(116, 21, 219)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [320, 132, 201, 334, 190, 130, 220]
      },
    ]
  };
  chart.setOption(option)
}
</script>

<style scoped lang="scss">
.wrapper {

  margin-top: 24px;
  width: 100%;
  height: 300px;
  background: url(../images/dataScreen-main-lc.png) no-repeat;
  background-size: cover;

  .title-wrapper {
    padding-left: 10px;

    .title {
      color: white;
      font-size: 20px;
      margin-bottom: 2px;
    }

    .title-icon {
      width: 50px;
    }
  }

  .content-wrapper {
    // margin-top: 24px;

    .echarts {
      width: 100%;
      height: 260px;
      // background: #bfc;
    }
  }

}
</style>
